超详细的vue3使用pdfjs教程

您所在的位置：网站首页 › pdfjs 获取页码 › 超详细的vue3使用pdfjs教程

超详细的vue3使用pdfjs教程

2023-08-16 11:03| 来源: 网络整理| 查看: 265

vue3中如何使用pdfjs来展示pdf文档

在项目开发中碰到一个需求是在页面中展示pdf预览功能，本人的项目使用的是vue3,实现pdf预览使用的是pdf预览神器 pdfjs

以下，将详细介绍如何在项目中使用pdfjs，主要包括以下内容：

单页pdf加载多页pdf加载pdf放大/缩小/大小重置pdf分页展示以及上下翻页pdf添加水印动态添加pdf从服务端获取pdf文件

参考资料: pdfjs源码及使用文档

1. 准备工作 1.1 pdfjs-dist 安装

百度搜索 npm pdfjs-dist，进入npm官方网站，即可查看pdfjs的安装方法：

安装命令：

npm i pdfjs-dist 2. 在vue3中使用pdfjs-dist查看pdf文档 2.1 基本页面代码

首先把基本的页面代码准备起来，具体代码如下：

import { Options, Vue } from 'vue-class-component' import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' // 注意导入的写法 import Pdf from '@/assets/js.pdf' @Options({}) export default class SinglePage extends Vue { }

以上是使用的 vue3 的 class模式编写vue代码的方式，对于此种使用方式不清楚的，可以查看我的这篇文章：

超全的Vue中的Class Component使用总结

Vue中的Class Component使用指南

2.2 pdfjs工作原理简述

pdfjs展示pdf文档的原理，实际上是将pdf中的内容渲染到解析，然后渲染到 canvas 中进行展示，因此我们使用pdfjs渲染出来的pdf文件，实际上是一张张canvas图片。

2.3 pdf文件展示（单页

pdfjs的使用主要涉及到2个方法，分别是loadFile() 和 renderPage()

loadFile() 主要用来加载pdf文件，其实现如下： loadFile (url: string): void { // 设定pdfjs的 workerSrc 参数 // NOTE: 这一步要特别注意，网上很多关于pdfjs的使用教程里漏了这一步，会出现workerSrc未定义的错误 PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry') const loadingTask = PdfJs.getDocument(url) loadingTask.promise.then((pdf) => { this.pdfDoc = pdf // 保存加载的pdf文件流 this.pdfPages = this.pdfDoc.numPages // 获取pdf文件的总页数 this.$nextTick(() => { this.renderPage(1) // 将pdf文件内容渲染到canvas， }) }) }

以上代码因为使用了 ts ,有部分函数参数类型的设定，在使用过程中，如遇到ts的报错，可以直接把类型设置为 any.

需要注意：以上部分的 workerSrc 赋值部分，需要特别注意，在pdfJs的使用示例中明确指出， workerSrc 的值要手动指定，如果没有指定此值，则会出现 workerSrc 未定义的bug, 另外，要注意，赋值时一定要赋值为 pdf.worker.entry （以entry结尾，表示入口）

renderPage() 方法主要用来将pdf文件的内容渲染到canvas上，其实现如下： // num 表示渲染第几页 renderPage (num: any): void { this.pdfDoc.getPage(num).then((page: any) => { const canvas: any = document.getElementById('pdf-canvas') // 获取页面中的canvas元素 // 以下canvas的使用过程 const ctx: any = canvas.getContext('2d') const dpr = window.devicePixelRatio || 1 const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 const ratio = dpr / bsr const viewport = page.getViewport({ scale: this.pdfScale }) // 设置pdf文件显示比例 canvas.width = viewport.width * ratio canvas.height = viewport.height * ratio canvas.style.width = viewport.width + 'px' canvas.style.height = viewport.height + 'px' ctx.setTransform(ratio, 0, 0, ratio, 0, 0) // 设置当pdf文件处于缩小或放大状态时，可以拖动 const renderContext = { canvasContext: ctx, viewport: viewport } // 将pdf文件的内容渲染到canvas中 page.render(renderContext) }) } 2.4 完整实现代码 import { Options, Vue } from 'vue-class-component' import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' import Pdf from '@/assets/js.pdf' @Options({}) export default class SinglePage extends Vue { pdfDoc: any = '' // 保存加载的pdf文件流 pdfPages = 0 pdfScale = 1.0 // class 组件中生命周期函数直接这样写 created () { this.loadFile(Pdf) } loadFile (url: string): void { PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry') const loadingTask = PdfJs.getDocument(url) loadingTask.promise.then((pdf) => { this.pdfDoc = pdf this.pdfPages = this.pdfDoc.numPages this.$nextTick(() => { this.renderPage(1) // 表示渲染第 1 页 }) }) } renderPage (num: any) { this.pdfDoc.getPage(num).then((page: any) => { const canvas: any = document.getElementById('pdf-canvas') const ctx: any = canvas.getContext('2d') const dpr = window.devicePixelRatio || 1 const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 const ratio = dpr / bsr const viewport = page.getViewport({ scale: this.pdfScale }) canvas.width = viewport.width * ratio canvas.height = viewport.height * ratio canvas.style.width = viewport.width + 'px' canvas.style.height = viewport.height + 'px' ctx.setTransform(ratio, 0, 0, ratio, 0, 0) const renderContext = { canvasContext: ctx, viewport: viewport } page.render(renderContext) }) } } 2.5 效果

3.多页pdf加载

接下来记录如何实现多页pdf展示，

3.1 基本思路

多页的实现主要基于单页pdf。单页pdf中，renderPage传入的参数 num 正是pdf文档的页数。renderPage方法首先获取template中的canvas元素，然后从pdf文件中解析出第 num 页的内容，将pdf文件的内容渲染到canvas画布上。那么多页pdf只需要先根据pdf文档的页数，生成多个canvas画布，然后在渲染pdf文件的时候，只需要根据num去获取对应的 canvas 画布和对应的pdf文件内容，将pdf内容渲染到canvas上就可以了。在加载pdf文件的时候，从第1页开始渲染，然后递归调用渲染函数，在每一次调用渲染函数的末尾，都将 num 的值加1，然后继续调用renderPage方法，直到所有的pdf页面渲染完毕为止。

下面看下具体的代码实现：

3.2 实现代码 template 部分 js部分 import { Options, Vue } from 'vue-class-component' import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' import Pdf from '@/assets/js.pdf' @Options({}) export default class MultiPage extends Vue { pdfDoc: any = '' // 保存加载的pdf文件流 pdfPages = 0 // pdf文件的页数 pdfScale = 1.0 // 缩放比例 // class 组件中生命周期函数直接这样写 created () { this.loadFile(Pdf) } loadFile (url: string): void { PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry') const loadingTask = PdfJs.getDocument(url) loadingTask.promise.then((pdf) => { this.pdfDoc = pdf this.pdfPages = this.pdfDoc.numPages this.$nextTick(() => { this.renderPage(1) // 表示渲染第 1 页 }) }) } renderPage (num: any) { this.pdfDoc.getPage(num).then((page: any) => { const canvasId = 'pdf-canvas-' + num // 第num个canvas画布的id const canvas: any = document.getElementById(canvasId) const ctx: any = canvas.getContext('2d') const dpr = window.devicePixelRatio || 1 const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 const ratio = dpr / bsr const viewport = page.getViewport({ scale: this.pdfScale }) canvas.width = viewport.width * ratio canvas.height = viewport.height * ratio canvas.style.width = viewport.width + 'px' canvas.style.height = viewport.height + 'px' ctx.setTransform(ratio, 0, 0, ratio, 0, 0) const renderContext = { canvasContext: ctx, viewport: viewport } page.render(renderContext) // 在第num页渲染完毕后，递归调用renderPage方法，去渲染下一页，直到所有页面渲染完毕为止 if (num

【本文地址】

超详细的vue3使用pdfjs教程

超详细的vue3使用pdfjs教程

今日新闻

推荐新闻